<template>
	<div class="order-mine">
		<div class="search" v-if="from == 'coach'">
			<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" v-model="key"/>
		</div>
		<div class="order-item" v-for="(item, index) in tableData" :key="index">
			<h2>{{ item.courseName }}</h2>
			<p>合约编号：{{ item.id }}</p>
			<p>订单支付时间：{{ item.payTime }}</p>
			<p>订单编号：{{ item.id }}</p>
			<span class="order-money"><i>￥</i><em>{{ (item.payMoney/100).toFixed(2) }}</em></span>
		</div>
		<uni-load-more :status="more"></uni-load-more>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { orderGet } from '@/api/manageApi'
export default {
	data() {
		return {
			page: 1,
			limit: 10,
			totalPage: 1,
			tableData: [],
			more: 'more',
			key: '',
			from: 'member'
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	//下拉刷新
	onPullDownRefresh () {
		this.page = 1
		this.setList()
	},
	//上拉加载
	onReachBottom () {
		if(this.page < this.totalPage){
			this.page++
			this.setList()
		}
	},
	onLoad(option) {
		this.from = option.from
		this.page = 1
		// console.log(this.userInfo)
		this.setList()
	},
	methods: {
		setList () {
			if(this.from == 'member'){
				this.handleList('', this.userInfo.phone)
			}
			if(this.from == 'coach'){
				this.handleList(this.userInfo.userId, this.key)
			}
		},
		search () {
			this.page = 1
			this.setList()
		},
		// 列表接口
    handleList (teachCoachUserId, key) {
      var params = {
        'size': this.limit,
        'current': this.page,
        'payTimeStart':'',
        'payTimeEnd': '',
        'teachCoachUserId': teachCoachUserId,
        'key': key,
        'orders[0].order': 'desc',
        'orders[0].sort': 'createTime'
      }
      orderGet(params).then(res => {
        // console.log(res)
				if (res.code == '200') {
					var data = res.data.records
					this.more = 'more'
					if (this.page == 1) {
						this.totalPage = Math.ceil(parseInt(res.data.total)/this.limit)
						this.tableData = data
						uni.stopPullDownRefresh()
					} else {
						this.tableData = this.tableData.concat(data)
					}
					if (this.page >= this.totalPage) {
						this.more = 'noMore'
					}
				}
      })
    }
	}
}
</script>

<style lang="scss">
.order-mine {
	.order-item{
		width: 702rpx;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 24rpx auto;
		padding: 29rpx 36rpx;
		box-sizing: border-box;
		position: relative;
		h2{
			font-weight: 400;
			font-size: 30rpx;
			color: #1E1E1E;
			margin-bottom: 27rpx;
		}
		p{
			font-size: 24rpx;
			color: #838383;
			margin-bottom: 19rpx;
		}
		.order-money{
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			display: flex;
			align-items: center;
			i{
				font-size: 24rpx;
				color: #1E1E1E;
			}
			em{
				font-weight: 500;
				font-size: 36rpx;
				color: #1E1E1E;
			}
		}
	}
}
</style>
